<script type="text/javascript">
	$(document).ready(function () {
		var theme = 'darkblue';
        var jabatan_task = "CREATE";
        var btn_jabatan_task = "";
		var gridExpandVar = 0;
		var formExpandVar = 0;
        var editrow = -1;
		
		
		$("#jqxNavigationBar").jqxNavigationBar({ width: '100%', height: 420, toggleMode: "none", sizeMode: 'auto', theme: theme });
		
		/* START DATA */
		// prepare the data
		var source =
		{
			datatype: "json",
			datafields: [
				{ name: 'KODEUNIT' },
				{ name: 'NAMAUNIT' },
				{ name: 'KODEJAB' },
				{ name: 'NAMAJAB' },
				{ name: 'HITUNGLEMBUR' },
				{ name: 'KOMPENCUTI' }
			],
			//id: 'KODEJAB',
			url: 'index.php?c=c_jabatan&m=get_list',
			root: 'data'
		};
		var dataAdapter = new $.jqx.dataAdapter(source);

		$("#jqxgrid").jqxGrid(
		{
			width: '100%',
			source: dataAdapter,
			theme: theme,
			sortable: true,
            pageable: true,
            autoheight: true,
			columns: [
				{ text: 'NAMAUNIT', dataField: 'NAMAUNIT', width: 180 },
				{ text: 'KODEJAB', dataField: 'KODEJAB', width: 120 },
				{ text: 'NAMAJAB', dataField: 'NAMAJAB', width: 180 },
				{ text: 'HITUNGLEMBUR', dataField: 'HITUNGLEMBUR', width: 100 },
				{ text: 'KOMPENCUTI', dataField: 'KOMPENCUTI', width: 100 },
				{ text: 'Edit', datafield: 'Edit', width: 125, columntype: 'button', cellsrenderer: function () {
					return "Edit";
				}, buttonclick: function (row) {
					// open form Create/Update.
					editrow = row;
					
					// get the clicked row's data and initialize the input fields.
					var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow);
					cu_formSet(dataRecord);
				}
				}
			]
		});
		/* END DATA */

		/* START FORM */
		//initialize field
		$("#jabatan_kodeunit_lama").addClass('jqx-input');
        $("#jabatan_kodeunit_lama").width(200);
        $("#jabatan_kodeunit_lama").height(23);
        $("#jabatan_kodeunit").addClass('jqx-input');
        $("#jabatan_kodeunit").width(200);
        $("#jabatan_kodeunit").height(23);
		$("#jabatan_kodejab_lama").addClass('jqx-input');
        $("#jabatan_kodejab_lama").width(200);
        $("#jabatan_kodejab_lama").height(23);
        $("#jabatan_kodejab").addClass('jqx-input');
        $("#jabatan_kodejab").width(200);
        $("#jabatan_kodejab").height(23);
        $("#jabatan_namajab").addClass('jqx-input');
        $("#jabatan_namajab").width(200);
        $("#jabatan_namajab").height(23);

        $("#jabatan_lemburYes").jqxRadioButton({ groupName: 'lembur', width: 50, height: 25, checked: true, theme: theme });
        $("#jabatan_lemburNo").jqxRadioButton({ groupName: 'lembur', width: 50, height: 25, checked: false, theme: theme });

        $("#jabatan_cutiYes").jqxRadioButton({ groupName: 'cuti', width: 50, height: 25, checked: true, theme: theme });
        $("#jabatan_cutiNo").jqxRadioButton({ groupName: 'cuti', width: 50, height: 25, checked: false, theme: theme });
		
		/*var date = new Date();
        var currentYear = date.getFullYear();
		var currentMonth = date.getMonth();
        var nextYear = currentYear+1;
        var thnAjaran = currentYear+"/"+nextYear;
        date.setFullYear(currentYear, currentMonth, 1);*/
		
		// initialize the popup window and buttons.
		$("#createBtn").jqxButton({ theme: theme });
		$("#Save").jqxButton({ theme: theme });
		$("#Cancel").jqxButton({ theme: theme });

		//CB-FK unitkerja
        var source_urlCBUnitkerja = "index.php?c=c_jabatan&m=get_unitkerja_list";
        var source_columnsCBUnitkerja = [
			{ name: 'KODEUNIT' },
            { name: 'NAMAUNIT' }
		];
 		var sourceCBUnitkerja = {
			datatype: "json",
            datafields: source_columnsCBUnitkerja,
            id: 'KODEUNIT',
            url: source_urlCBUnitkerja,
            root: 'data'
		};
        var dataAdapterCBUnitkerja = new $.jqx.dataAdapter(sourceCBUnitkerja);
		$("#jabatan_kodeunit").jqxComboBox({ source: dataAdapterCBUnitkerja, displayMember: "NAMAUNIT", valueMember: "KODEUNIT", width: 200, height: 23, theme: theme });
        /* END FORM */
		
		/* START ACTION */
        // update the edited row when the jabatan clicks the 'Save' button.
        $("#Save").click(function () {
        	var jabatan_kodeunit_lama_field = "";
        	var jabatan_kodeunit_field = "";
			var jabatan_kodejab_lama_field = "";
        	var jabatan_kodejab_field = "";
        	var jabatan_namajab_field = "";
        	var jabatan_hitunglembur_field = "";
        	var jabatan_kompencuti_field = "";
        	
        	if($("#jabatan_kodeunit_lama").val() !== null || $("#jabatan_kodeunit_lama").val() !== ''){
				jabatan_kodeunit_lama_field = $("#jabatan_kodeunit_lama").val();
			}
        	if($("#jabatan_kodeunit").jqxComboBox('getSelectedItem') !== null){
        		jabatan_kodeunit_field = $("#jabatan_kodeunit").jqxComboBox('getSelectedItem').value;
        	}
			if($("#jabatan_kodejab_lama").val() !== null || $("#jabatan_kodejab_lama").val() !== ''){
				jabatan_kodejab_lama_field = $("#jabatan_kodejab_lama").val();
			}
			if($("#jabatan_kodejab").val() !== null || $("#jabatan_kodejab").val() !== ''){
				jabatan_kodejab_field = $("#jabatan_kodejab").val();
			}
			if($("#jabatan_namajab").val() !== null || $("#jabatan_namajab").val() !== ''){
				jabatan_namajab_field = $("#jabatan_namajab").val();
			}
			if($("#jabatan_lemburYes").jqxRadioButton('checked') == true){
				jabatan_hitunglembur_field = "Y";
			}else{
				jabatan_hitunglembur_field = "T";
			}
			
			if($("#jabatan_cutiYes").jqxRadioButton('checked') == true){
				jabatan_kompencuti_field = "Y";
			}else{
				jabatan_kompencuti_field = "T";
			}

        	var row = {
                	task: jabatan_task,
                	kodeunit_lama: jabatan_kodeunit_lama_field,
                	kodeunit: jabatan_kodeunit_field,
					kodejab_lama: jabatan_kodejab_lama_field,
                	kodejab: jabatan_kodejab_field,
            		namajab: jabatan_namajab_field,
					hitunglembur: jabatan_hitunglembur_field,
					kompencuti: jabatan_kompencuti_field
        	};
        	
            if (editrow >= 0) {
                //edit row
            	$.ajax({
                    type: 'POST',
                    url: 'index.php?c=c_jabatan&m=get_action',
                    data: row,
                    success: function(response){
                        //if(response==1){
                            $('#jqxgrid').jqxGrid('updatebounddata');
                            gridExpand();
                        //}
                    }
                });
            }else{
            	//add row
            	$.ajax({
                    type: 'POST',
                    url: 'index.php?c=c_jabatan&m=get_action',
                    data: row,
                    success: function(response){
                        if(response==1){
                            $('#jqxgrid').jqxGrid('updatebounddata');
                            gridExpand();
                        }
                    }
                });
            	
            }
        });

        $("#Cancel").click(function () {
        	cu_formReset();
        	$("#popupWindow").jqxWindow('hide');
        	gridExpand();
        });
		
		$("#createBtn").click(function () {
        	btn_jabatan_task = "CREATE";

        	cu_formReset();
			
        	formExpand();
        	
        	$("#jabatan_kodejab_lama").val(0);
        });
        
        /* END ACTION */

        /* START FUNCTION */
		function cu_formReset(){
			$("#jabatan_kodeunit_lama").val("");
			$("#jabatan_kodeunit").jqxComboBox('clearSelection');
			$("#jabatan_kodejab_lama").val("");
			$("#jabatan_kodejab").val("");
			$("#jabatan_namajab").val("");
			$("#jabatan_lemburYes").jqxRadioButton({ checked: true });
			$("#jabatan_cutiYes").jqxRadioButton({ checked: true });
        }

        function cu_formSet(dataRecord){
            btn_jabatan_task = "UPDATE";
			
			/*var arr_tglrevisi = dataRecord.TGLREVISI.split('-');
			var thn = arr_tglrevisi[0];
			var bln = arr_tglrevisi[1];
			var tgl = arr_tglrevisi[2];
			var set_tglrevisi = new Date(thn, (bln - 1), tgl);*/
			
			$("#jabatan_kodeunit_lama").val(dataRecord.KODEUNIT);
			$("#jabatan_kodeunit").find('input').val(dataRecord.NAMAUNIT);
			$("#jabatan_kodejab_lama").val(dataRecord.KODEJAB);
			$("#jabatan_kodejab").val(dataRecord.KODEJAB);
			$("#jabatan_namajab").val(dataRecord.NAMAJAB);
			if(dataRecord.HITUNGLEMBUR == 'Y'){
				$("#jabatan_lemburYes").jqxRadioButton({ checked: true });
				$("#jabatan_lemburNo").jqxRadioButton({ checked: false });
			}else{
				$('#jabatan_lemburYes').jqxRadioButton({ checked: false });
				$('#jabatan_lemburNo').jqxRadioButton({ checked: true });
			}

			if(dataRecord.KOMPENCUTI == 'Y'){
				$("#jabatan_cutiYes").jqxRadioButton({ checked: true });
				$("#jabatan_cutiNo").jqxRadioButton({ checked: false });
			}else{
				$('#jabatan_cutiYes').jqxRadioButton({ checked: false });
				$('#jabatan_cutiNo').jqxRadioButton({ checked: true });
			}

            
            formExpand();
        }
		
        function gridExpand(){
			gridExpandVar = 1;
			formExpandVar = 0;
        	$("#jqxNavigationBar").jqxNavigationBar('expandAt', 0);
        }
        function formExpand(){
			gridExpandVar = 0;
			formExpandVar = 1;
        	$("#jqxNavigationBar").jqxNavigationBar('expandAt', 1);
        }
        /* END FUNCTION */
		
		$('#jqxNavigationBar').bind('expandedItem', function (event) {
			if((event.item == 1) && (formExpandVar == 1) && (btn_jabatan_task == "UPDATE")){
				jabatan_task = "UPDATE";
			}else{
				jabatan_task = "CREATE";
			}
		});

	});
</script>

<style type="text/css">
    .text-input
    {
        height: 21px;
        width: 150px;
    }
    .register-table
    {
    	width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .register-table td, tr
    {
        margin: 0px;
        padding: 2px;
        border-spacing: 0px;
        border-collapse: collapse;
        font-family: Verdana;
        font-size: 12px;
    }
    h3 
    {
        display: inline-block;
        margin: 0px;
    }
    textarea
	{
	   resize: none;
	}
</style>

<div id='jqxNavigationBar'>
	<!--Header-->
	<div>Data</div>
	<!--Content-->
	<div>
		<div id="jqxgrid"></div>
	</div>
	<!--Header-->
	<div>Form Create/Update</div>
	<!--Content-->
	<div>
		<form id="jabatanForm" action="#">
		<table class="register-table">
			<tr style="display: none;">
				<td align="right">KODEUNIT LAMA:</td>
				<td align="left"><input id="jabatan_kodeunit_lama" /></td>
			</tr>
			<tr style="display: none;">
				<td align="right">KODEJAB LAMA:</td>
				<td align="left"><input id="jabatan_kodejab_lama" /></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">KODEUNIT:</td>
				<td align="left"><div id="jabatan_kodeunit" ></div></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">KODEJAB:</td>
				<td align="left"><input id="jabatan_kodejab" /></td>
			</tr>
			<tr>
				<td align="right" valign="top" width="120px">NAMAJAB:</td>
				<td align="left"><input id="jabatan_namajab" /></td>
			</tr>
			<tr>
				<td align="right" valign="top">HITUNGLEMBUR:</td>
				<td align="left" valign="top"><div style="float: left; vertical-align: middle;" id='jabatan_lemburYes'>Ya</div><div style="float: left;" id='jabatan_lemburNo'>Tidak</div></td>
			</tr>
			<tr>
				<td align="right" valign="top">KOMPENCUTI:</td>
				<td align="left" valign="top"><div style="float: left; vertical-align: middle;" id='jabatan_cutiYes'>Ya</div><div style="float: left;" id='jabatan_cutiNo'>Tidak</div></td>
			</tr>
			<tr>
				<td align="right"></td>
				<td style="padding-top: 10px;" align="right"><input style="margin-right: 5px;" type="button" id="Save" value="Save" /><input id="Cancel" type="button" value="Cancel" /></td>
			</tr>
		</table>
		</form>
	</div>
</div>

<div style="margin-top: 10px;">
	<input id="createBtn" type="button" value="Create Data" />
</div>
